<template>
<div class="userData">
	<navSimple message="修改信息"></navSimple>
	<div class="user-box">
		 				<div class="error-item"  v-show="errMsg">
		 					<i class="iconfont icon-warning "></i>
		 					<p class="error-msg">{{errMsg}}</p>
		 				</div>

		 				

		 				<div class="user-item">
			 				<label class="user-label" for="phone"><i class="iconfont icon-phone" ></i>
			 				</label>
			 				<input class='user-content' id="phone"  @focus="movetosight($event)" v-model="formData.phone"	placeholder="请输入手机号" autocomplete="off">

		 				</div>
		 				<div class="user-item">
			 				<label class="user-label" for="email"><i class="iconfont icon-email" ></i>
			 				</label>
			 				<input class='user-content' id="email"  @focus="movetosight($event)" v-model="formData.email" placeholder="请输入邮箱" autocomplete="off">

		 				</div>
		 				<div class="user-item">
			 				<label class="user-label" for="question"><i class="iconfont icon-help" ></i>
			 				</label>
			 				<input class='user-content' id="question"  @focus="movetosight($event)" v-model="formData.question"	placeholder="请输入密码提示问题" autocomplete="off">

		 				</div>
		 				<div class="user-item">
			 				<label class="user-label" for="answer"><i class="iconfont icon-success" ></i>
			 				</label>
			 				<input class='user-content' id="answer"  @focus="movetosight($event)" v-model="formData.answer"	placeholder="请输入问题答案" autocomplete="off">

		 				</div>


		 				<div  class="btn btn-submit" @click="doUpdate()">确认修改</div>
		 			</div> 
</div>
</template>

<script>
 import 'common/css/reset.css';
import 'common/css/iconfont.css';
import navSimple from "components/units/navSimple"
var _user   =require("common/util/server/userServer.js");
var _mm     =require("common/util/mm.js");
export default {

  name: 'userData',
  created(){
  	let _this=this;
  	_mm.getUserInfo(function(res){
  		_this.formData.email= res.data.email;
  		_this.formData.phone= res.data.phone;
  		_this.formData.question= res.data.question;
  		_this.formData.answer= res.data.answer;
  	},function(err){

  	})

  		},
   methods:{
  		movetosight(e){
  			let _this=this;
  			let panel=e.target;
  			setTimeout(function(){
  				panel.scrollIntoView(true);
  				panel.scrollIntoViewIfNeeded();
  			},200)
  		},

  		doRegister(){
  			var _this=this;
  			 if (!_mm.validate(this.formData.phone,'phone')) {
			
			this.errMsg ='电话格式不正确';
			
			
		}else if (!_mm.validate(this.formData.email,'email')) {
			
			this.errMsg ='电子邮箱格式不正确';
			
			
		}else if (!_mm.validate(this.formData.question,'require')) {
		
			this.errMsg ='提示问题不能为空';
			
			
		}else if (!_mm.validate(this.formData.answer,'require')) {
		
			this.errMsg ='答案不能为空';
			
			
		}else{
			this.errMsg="";
			_user.updateUserinfo(this.formData,
				function(res){
					window.alert("修改成功");
		
				},
				function(err){
					_this.errMsg=err.msg;
				})
		}

  		},
  },

  data () {
    return {
    	errMsg:"",
    		formData :{
	                      

	                      email:"",
	                      phone:"",
	                      question:"",
	                      answer:"",

	                    },
    }
  },
  components:{
  	navSimple
  }
}
</script>

<style lang="stylus" scoped>
.user-box
	width:80%;
	margin:0 auto;
	.error-item
		height:50px
		width:100%
		margin-bottom:10px
	.user-item
		width:100%
		height:auto
		margin-bottom:10px
		border:.5px solid #bdbdbd
		color:#d3d3d3
		.user-label
			display:inline-block
			border-right:.5px solid #bfbfbf
			height:30px
			width:10%
			text-align:center 
			line-height:30px
			background:#f3f3f3
		.user-content
			height:30px
			width:80%
			display:inline-block
			padding:0
			border:0
			outline:none
	.btn
		height:50px
		width:100%
		background:rgb(222,64,43)
		color:white
		font-size:24px
		text-align:center
		line-height:50px
	.error-item
		height:80px
		width:100%
		border:.5px solid rgb(222,64,43)	
		text-align:center
		color:rgb(222,64,43)	
		background:#fde9e9
			
			

</style>